<template>
  <view class="body">
    <CustmNavBar :title="pageTitle" :dark="false" />
    <view class="con" v-for="i of usePageData" :key="i">
      <view class="item" v-for="n of i" :key="n">
        <view class="content">
          <view class="left"
            ><view class="title">{{ n.title }}</view>
            <view class="value">{{ n.value }}</view>
          </view>
          <view class="right">
            <button
              v-if="n.editor"
              type=""
              class="ed"
              size="mini"
              @click="n.onClick"
            >
              {{ t("Edit") }}
            </button>
          </view>
        </view>
      </view>
    </view>
    <CustomModel
      :visible="show"
      :formConfig="[
        { label: t('Lang_StoreName'), key: 'name', placeholder: t('Enter') },
      ]"
      @submit="onSubmit"
      @hide="close"
    />
    <!-- <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        mode="input"
        :title="t('Store Name')"
        value="对话框预置提示内容!"
        :placeholder="t('Store Name')"
        @confirm="dialogInputConfirm"
        :cancel-text="t('Cancel')"
        :confirm-text="t('Save')"
      />
    </uni-popup> -->
  </view>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import CustmNavBar from "@/components/CustomNavBar/index.vue";
import CustomModel from "@/components/CustomModel/index.vue";
import { useDeviceStore } from "../../../store";

const deviceStore = useDeviceStore();
const { t } = useI18n();

const pageTitle = t("Account Info");

// 编辑名称弹窗
const popup = ref(null);

const show = ref(false);
const onSubmit = (e) => {
  pageData.value.storeName.name.value = e.name;
  show.value = false;
};

const close = () => {
  show.value = false;
};

const pageData = ref({
  storeName: {
    name: {
      title: "Store Name",
      value: deviceStore.MyShop.shopName,
      editor: true,
      onClick: () => {
        show.value = true;
      },
    },
  },
  companyInfo: {
    name: {
      title: "Company Name",
      value: deviceStore.MyShop.vat,
    },
    VAT: {
      title: "VAT",
      value: deviceStore.MyShop.vat,
    },
  },
  other: {
    street: {
      title: "Street",
      value: "Al-Rajhi Bank",
    },
    neighborhood: {
      title: "Neighborhood",
      value: "Al-Rajhi Bank",
    },
    city: {
      title: "City",
      value: deviceStore.MyShop.shopCity,
    },
    province: {
      title: "Province",
      value: "Al-Rajhi Bank",
    },
    buidingNumber: {
      title: "Buiding Number",
      value: "5656265656565656",
    },
    plotIdentification: {
      title: "Plot Identification",
      value: deviceStore.MyShop.bankAccountNumber,
    },
    zip: {
      title: "Zip",
      value: deviceStore.MyShop.bankName,
    },
  },
});

const usePageData = computed(() => {
  const data = [];
  for (const key in pageData.value) {
    if (Object.hasOwnProperty.call(pageData.value, key)) {
      const element = pageData.value[key];
      const childData = [];
      if (typeof element === "object") {
        for (const key2 in element) {
          if (Object.hasOwnProperty.call(element, key2)) {
            const element2 = element[key2];
            childData.push(element2);
          }
        }
      }
      data.push(childData);
    }
  }
  return data;
});
// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1,
  });
};

onMounted(() => {
  console.log("usePageData", usePageData.value);
});
</script>

<style lang="scss" scoped>
.body {
  background: #ebeff5;
}
.con {
  margin-top: 20rpx;
  .item {
    &:last-child {
      .content {
        border-bottom: 0;
      }
      border-radius: 0 0 3px 3px;
    }
    &:first-child {
      border-radius: 3px 3px 0 0;
    }
  }
}
.item {
  display: flex;
  padding: 0 20rpx;
  margin: 0 10rpx;
  background: #ffffff;
  .content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1px solid #d2d2d2;
    font-size: 16rpx;
    .ed {
      border-radius: 50rpx;
      background: #1aad19;
      color: #fff;
    }
    .title {
      font-size: 20rpx;
      font-weight: bold;
    }
  }
}
</style>
